<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },
        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },
        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" }
      ];

      // 完成代码
      function arrToTree(data) {
        // 你的代码
        // 定义一个新数组
        let newArr = [];
        // 遍历传进来的数组
        data.forEach(item => {
          // 判断pid如果为空,就把这一项追加到数组中
          if (!item.pid) newArr.push(item);
          // 下一步进行筛选,用遍历出来的每一项item,与原数组每一项的id对比
          // 如果遍历出来obj的pid 等于item的 id,就追加到item中
          let children = data.filter(obj => obj.pid === item.id);
          // 如果children 为空,就什么都不做
          if (!children.length) return;
          // 否则就让当前item的children 等于创建出来的children对象
          item.children = children;
        });
        return newArr; //将值返回出去
      }

      // 目标：
      const treeData = arrToTree(data);
      console.log(treeData);
      // treeData 最终数据格式：
      // [{
      //   label: '张大大',
      //   children: [
      //     {
      //       label: '小亮',
      //       children: [{label: '小丽'}，{label: '大光'}]
      //     },
      //     {
      //       label: '小美',
      //       children: [{label: '小高'}]
      //     },
      //     {
      //       label: '老马',
      //       children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
      //     },
      //     {
      //       label: '老王',
      //       children: [{label: '小赵'}，{label: '小强'}]
      //     },
      //     {
      //       label: '老李',
      //       children: [{label: '小涛'}]
      //     }
      //   ]
      // }]
    </script>
  </body>
</html>
